<template>
  <div class="searchContainer">
    <div class="searchResult">
      <!-- 搜索级联条件 -->
      <div class="m-crumb">
        <span class="all-span">
          <span>全部商品</span>
          <i v-if="sureCategory.length !== 0">
            <svg
              t="1632740126018"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2954"
              width="10"
              height="10"
            >
              <path
                d="M301.99808 44.9792l-47.04768 47.09888 419.9424 419.98848-419.9424 419.90144 47.0528 47.0528 419.93728-419.89632h0.00512l47.104-47.09888-47.0528-47.04768z"
                p-id="2955"
                fill="#999999"
              ></path>
            </svg>
          </i>
        </span>
        <!--中间的筛选条件 -->
        <span class="center-span">
          <span
            v-for="(item, index) in sureCategory"
            :key="index"
            class="center-span-choose"
          >
            {{ item.name }}
            <span @click="deleCategory(index)" class="deleSpan">
              <i>
                <svg
                  t="1632740807158"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4991"
                  width="10"
                  height="10"
                >
                  <path
                    d="M119.233957 66.85913l837.898911 837.898911-52.368365 52.368365-837.898911-837.898911 52.368365-52.368365Z"
                    p-id="4992"
                    fill="#999999"
                  ></path>
                  <path
                    d="M957.140461 119.233957l-837.898911 837.898911-52.368365-52.368365 837.898911-837.898911 52.368365 52.368365Z"
                    p-id="4993"
                    fill="#999999"
                  ></path>
                </svg>
              </i>
            </span>
          </span>
          <i>
            <svg
              t="1632740126018"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2954"
              width="10"
              height="10"
            >
              <path
                d="M301.99808 44.9792l-47.04768 47.09888 419.9424 419.98848-419.9424 419.90144 47.0528 47.0528 419.93728-419.89632h0.00512l47.104-47.09888-47.0528-47.04768z"
                p-id="2955"
                fill="#999999"
              ></path>
            </svg>
          </i>
        </span>

        <span class="last-span">
          <span>毛巾</span>
        </span>
      </div>
      <!-- 中间商品展示页面 -->
      <div class="content">
        <div class="m-sortBar">
          <!-- 分类 -->
          <div class="category">
            <span class="category-span">分类:</span>
            <div class="categoryGroup">
              <span
                v-for="(category, index) in categoryList"
                :key="index"
                @click="
                  chenckCategory(
                    category.categoryVO.id,
                    category.categoryVO.name
                  )
                "
                >{{ category.categoryVO.name }}</span
              >
              <!-- <span>毛巾浴巾</span>
              <span>餐厨配具</span>
              <span>收纳</span>
              <span>茶咖酒具</span>
              <span>毛巾浴巾</span>
              <span>餐厨配具</span>
              <span>收纳</span> -->
            </div>
          </div>
          <!-- 排序 -->
          <div class="sorts">
            <span class="sorts-span">排序</span>
            <div class="sorts-div">
              <span :class="{ reset: queryData.sortType === 0, defaultSpan:true}" @click="chooseDefault">默认</span>
              <span
                :class="{ price: true, pricechoose: queryData.sortType === 1 }"
                >价格</span
              >
              <div class="operation" @click="changSort">
                <i style="height: 13px">
                  <svg
                    t="1632744464860"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6184"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M512 341.333333l-298.666667 298.666667h597.333334z"
                      fill="#999999"
                      p-id="6185"
                    ></path>
                  </svg>
                </i>
                <i style="height: 13px; margin-left: 1px">
                  <svg
                    t="1632744549955"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7995"
                    width="14"
                    height="14"
                  >
                    <path
                      d="M192 348.16h640.512L512 732.16 192 348.16z"
                      fill="#999999"
                      p-id="7996"
                    ></path>
                  </svg>
                </i>
              </div>
              <div class="priceIpt">
                <!-- <div class="floorPrice" >
                  <i>
                    <svg
                      t="1632746304261"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="9005"
                      width="14"
                      height="14"
                      data-spm-anchor-id="a313x.7781069.0.i41"
                    ></svg>
                  </i>
                </div> -->

                <div class="floorPrice">
                  <input
                    v-model="queryData.floorPrice"
                    type="text"
                    @focus="priceFocus"
                    @blur="priceBlur"
                  />
                </div>
                <i>-</i>
                <div class="upperPrice">
                  <input
                    v-model="queryData.upperPrice"
                    type="text"
                    @focus="priceFocus"
                    @blur="priceBlur"
                  />
                </div>
                <div class="priceSure" v-if="priceSure">
                  <a class="ok" @mousedown="okPrice">确认</a>
                  <a class="reset">清空</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品展示页面 -->
      <div class="resultList">
        <ul class="m-itemList">
          <li
            data-index="1"
            v-for="(item, index) in searcherResultList.result"
            :key="index"
          >
            <div
              class="item"
              @mouseover="changeImg"
              @mouseleave="leaveChangeImg"
            >
              <!-- 图片 -->
              <div class="hd">
                <!-- <a v-if="imgFlag && datasetIndex!=='1'"><img data-index=1 src="../../assets/pic2.png"/></a>
                          <a v-else><img src="../../assets/pic3.png"/></a> -->
                <a v-if="!imgFlag && datasetIndex == index"
                  ><img :src="item.scenePicUrl"
                /></a>
                <a v-else><img :data-index="index" :src="item.listPicUrl" /></a>
              </div>
              <!-- 文字描述 -->
              <div class="goods-detail" :data-index="index">
                <div class="prdtTags"></div>
                <div class="goods-title">
                  <a href="javascript:;">{{ item.name }}</a>
                </div>
                <div class="goods-price">
                  <span class="flag">¥</span
                  ><span>{{ item.counterPrice }}</span>
                </div>
                <!-- <div class="goods-add-cart" ><span><a href="javascript:;">加入购物车</a></span></div> -->
                <div class="addCart">
                  <a class="btn"><span>加入购物车</span></a>
                </div>
              </div>
            </div>
          </li>
          <!-- <li data-index="2">
            <div
              class="item"
              @mouseover="changeImg"
              @mouseleave="leaveChangeImg"
            >
            -->
          <!-- 图片 -->
          <!--
              <div class="hd">
                <a v-if="!imgFlag && datasetIndex == '2'"
                  ><img src="../../assets/pic3.png"
                /></a>
                <a v-else><img data-index="2" src="../../assets/pic2.png" /></a>
              </div>
              -->
          <!-- 文字描述 -->
          <!-- <div class="goods-detail">
                <div class="prdtTags"></div>
                <div class="goods-title">
                  <a href="javascript:;"
                    >【新疆棉】快速擦干，阿瓦提长绒棉毛巾</a
                  >
                </div>
                <div class="goods-price">
                  <span class="flag">¥</span><span>23</span>
                </div> -->
          <!-- <div class="goods-add-cart" ><span><a href="javascript:;">加入购物车</a></span></div> -->
          <!-- <div class="addCart">
                  <a class="btn"><span>加入购物车</span></a>
                </div>
              </div>
            </div>
          </li> -->
        </ul>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetsearchAndShowGoods } from "../../api/searchAndShowGoods";
export default {
  name: "ShowGoods",

  data() {
    return {
      imgFlag: true,
      datasetIndex: 0,
      // 分类
      categoryList: [],
      // 列表
      searcherResultList: [],
      // 请求参数
      queryData: {
        __timestamp: 1632796580826,
        page: 1,
        sortType: 0,
        // categoryId: 1005000,
        categoryId: 0,
        descSorted: true,
        matchType: 1,
        floorPrice: "",
        upperPrice: "",
        stillSearch: false,
        searchWordSource: 1,
        size: 40,
        keyword: "毛巾",
        // keyword: "衣服",
        needPopWindow: false,
      },
      // 选中的分类
      sureCategory: [],
      // 是否显示价格确认按钮和清除
      priceSure: true,
      // 分页
      total: 1,
      totalPage: 1,
      pageSize: 40,
    };
  },

  mounted() {
    this.getAllList();
  },

  methods: {
    // 获取数据集合
    async getAllList() {
      // 判断floorPrice和upperPrice是否符合要求，不符合要求就给默认值
      if (this.queryData.floorPrice < 0 || this.queryData.upperPrice < 0) {
        this.queryData.floorPrice = -1;
        this.queryData.upperPrice = -1;
      }
      if (
        this.queryData.floorPrice === "" ||
        this.queryData.upperPrice === ""
      ) {
        this.queryData.floorPrice = -1;
        this.queryData.upperPrice = -1;
      }
      const result = await reqGetsearchAndShowGoods(this.queryData);
      this.categoryList = result.directly.searcherCategoryHitCountList;
      this.searcherResultList = result.directly.searcherResult;
      this.total = result.directly.searcherResult.pagination.total;
      this.totalPage = result.directly.searcherResult.pagination.totalPage;
      this.queryData.floorPrice = "";
      this.queryData.upperPrice = "";
      console.log("result", result);
    },
    // 鼠标移入修改图片
    changeImg(e) {
      this.datasetIndex = e.target.dataset.index;
      this.imgFlag = false;
    },
    // 鼠标移出修改图片
    leaveChangeImg() {
      this.datasetIndex = 0;
      this.imgFlag = true;
    },
    // 点击分类
    chenckCategory(id, name) {
      this.queryData.categoryId = id;
      const isChoose = this.sureCategory.findIndex((item) => item.id === id);
      //  没选中，添加到对象中
      if (isChoose === -1) {
        // 把数据存到sureCategory中
        this.sureCategory.push({
          id,
          name,
        });
      }
      // 重新请求数据
      this.getAllList();
    },
    // 删除选中的分类
    deleCategory(index) {
      // console.log('索引',index);
      // 截取0-index的数据sureCategory
      const newSureCategory = this.sureCategory.slice(0, index);
      this.sureCategory = newSureCategory;
      //  重新请求页面
      this.queryData.categoryId =
        this.sureCategory[this.sureCategory.length - 1].id;
      this.getAllList();
      // console.log('ididid',this.sureCategory[this.sureCategory.length-1].id);
    },
    // 修改排序方式
    changSort() {
      this.queryData.sortType = 1;
      this.queryData.descSorted = this.queryData.descSorted ? false : true;
      //  重新请求数据
      this.getAllList();
    },
    // 最低价获得焦点
    priceFocus() {
      this.priceSure = true;
    },
    // 最低价失去焦点
    priceBlur() {
      this.priceSure = false;
    },
    okPrice() {
      // console.log(1111);
      // console.log("a", this.queryData.upperPrice);
      // console.log('b',this.queryData.floorPrice);
      this.getAllList();
    },
   
    // 当当前页码（currentPage）发生变化触发的回调
    handleCurrentChange(currentPage) {
      // this.currentPage = currentPage
      // this.getSpuList()
      // console.log('currentPage',currentPage);
      this.queryData.page=currentPage;
      this.getAllList()
    },
    // 点击默认
    chooseDefault(){
      this.queryData.sortType=0;
      this.getAllList()
    }
  },
};
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}
.goods-title {
  font-size: 10px;

  width: 166px;
  margin: 0 auto 4px;
  max-height: 40px;
  line-height: 20px;
  display: -webkit-box;
  overflow: hidden;
  font-weight: bold;
}
.goods-title a {
  color: black;
}
.goods-price {
  color: #d4282d;
  font-size: 13px;
}
.goods-detail {
  text-align: center;
  padding-bottom: 20px;
}
.goods-detail .prdtTags {
  height: 20px;
  color: #fff;
  width: 200px;
  margin: 0 auto 3px;
}

.m-itemList li:hover {
  background-color: #f4f0ea;
  text-align: center;
 box-shadow: #666 0px 0px 10px;

}
.addCart {
  margin-top: 4px;
}
.addCart a:hover {
  background-color: #ceb687 !important;
}
.addCart :hover {
  background-color: #ceb687 !important;
}
.addCart .btn {
  width: 110px;
  height: 30px;
  line-height: 28px;
  font-size: 14px;
  color: #fff;
  border: 1px solid #b4a078;
  background-color: #b4a078;
  padding: 4px 19px;
}

.goods-add-cart a {
  vertical-align: middle;
  color: black;
}

.goods-add-cart :hover {
  vertical-align: middle;
  color: black;
  background-color: #b4a078;
}
.goods-add-cart {
  background-color: #b4a078;
  margin: 0 auto;
  width: 200px;
  width: 110px;
  height: 30px;
  line-height: 28px;
  font-size: 14px;

  border: 1px solid #b4a078;
  background-color: #b4a078;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  width: 96px;

  padding: 0;
  letter-spacing: normal;
  line-height: 26px;
  font-size: 15px;
  text-align: center;
  color: #333;
  border: 1px solid #ccc;
  position: relative;
}

.searchContainer {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
}
.searchResult {
  width: 70%;
  height: 100%;
  background-color: white;
  margin: 0 auto;
}
.m-crumb {
  padding: 24px 0;
  font-size: 12px;
  color: black;
  background-color: #f5f5f5;
}
.all-span i {
  margin: 0 7px;
}

.center-span span {
  border: 1px solid #ccc;
  padding: 5px 0;
  background-color: white;
  margin-right: 5px;
}
.center-span i {
  margin: 0 7px;
}
.last-span {
  color: #999;
}
.content {
  width: 100%;
  height: 100%;
}
.m-sortBar {
  height: 100%;
  width: 95%;
  // margin-top: 10px;
  // background-color: tomato;
  margin: 0 auto;
  border-bottom: 1px solid #eaeaea;
}
.m-sortBar .category {
  display: flex;
  padding-top: 20px;
  padding-bottom: 10px;
}
.category .category-span {
  font-size: 14px;
  color: #999;
  margin-right: 50px;
  width: 32px;
}
.sorts {
  padding: 5px 0;
  border-top: 1px dashed #dedede;
  display: flex;
  align-items: center;
}
.sorts .sorts-span {
  font-size: 14px;
  color: #999;
  margin-right: 50px;
}
.sorts-div {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.sorts-div span {
  margin-right: 30px;
}
.sorts-div .price {
  margin-right: 10px;
  margin-left: 20px;
}
.pricechoose {
  margin-right: 10px;
  color: #b4a078;
}
.sorts-div .reset {
  color: #b4a078;
}
.sorts-div .resetnochoose {
  color: black !important;
}
.categoryGroup {
  margin-bottom: 4px;
  width: 929px;
}
.categoryGroup span {
  color: black;
}
.categoryGroup span {
  margin-right: 30px;
  margin-bottom: 16px;
  font-size: 14px;
}
.categoryGroup :hover {
  color: #b4a078;
  cursor: pointer;
}
.sorts {
  display: flex;
}
.operation {
  display: flex;
  flex-direction: column;
}
.operation :hover {
  cursor: pointer;
}
.operation li {
  display: block;
  width: 16px;
  height: 10px;
}
.priceIpt {
  display: flex;
  margin: 0 30px;
}
.priceIpt input {
  width: 55px;
  height: 18px;
  margin: 0 10px;
  border: 0.5px solid #999;
}

.resultList {
  margin: 25px auto 0;
  width: 100%;
  height: 100%;
}
.resultList .m-itemList {
  display: flex;
  flex-wrap: wrap;
  padding-left: 30px;
}
.resultList .m-itemList li {
  list-style: none;
  width: 240px;
  height: 400px;
  background-color: #fff;
  margin-right: 10px;
  margin-bottom: 50px;
}
.resultList .m-itemList .item .hd {
  width: 240px;
  height: 245px;
  background-color: white;
}
.resultList .m-itemList .item .hd img {
  width: 100%;
  height: 100%;
}
.deleSpan {
  margin: 0 0 !important;
  padding: 0 0 !important;
  border: none !important;
}
.deleSpan :hover {
  cursor: pointer;
}

.center-span :hover {
  border: 1px solid #b4a078 !important;
  color: #b4a078;
}
.center-span span :hover {
  border: none !important;
}
.priceSure .ok {
  margin-right: 10px;
  text-align: center;
  width: 60px;
  height: 26px;
  line-height: 24px;
  border: 1px solid #ccc;
  border-radius: 2px;
  color: #ccc !important;
  background-color: #f5f5f5;
  padding: 2px 15px;
  font-size: 13px;
}
.priceSure .ok:hover {
  // color: red !important;
  background-color: white;
  color: black !important;
  cursor: pointer;
}
.priceSure .reset {
  color: rgb(187, 186, 186);
}
.pagination {
  display: flex;
  justify-content: center;
}
.defaultSpan{
  cursor: pointer;
}



</style>